<template>
<el-card>
  <!-- 商品运费模板 -->
  <div class="page">
    <h3 class="applyRecode">新增运费模板</h3>
    <el-form class="form" :model="form" ref="form" :rules="rules" label-width="125px">
      <el-form-item size="small" label="计费方式：">{{form.paystyle}}</el-form-item>
      <el-form-item size="small" label="模板名称：">
        <el-input placeholder="" v-model="form.name"></el-input>
      </el-form-item>
      <!-- <div class="proces">
        <el-form-item size="small" class="local1" label="发货地址：" prop="provice">
          <el-select class="" v-model="form.provice" placeholder="请选择省">
            <el-option label="河南省" value="shanghai"></el-option>
            <el-option label="湖北省" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" class="local2" label="" prop="city">
          <el-select class="" v-model="form.city" placeholder="请选择市">
            <el-option label="长沙市" value="shanghai"></el-option>
            <el-option label="重庆市" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" class="local3" label="" prop="area">
          <el-select class="" v-model="form.area" placeholder="请选择市">
            <el-option label="高新区" value="shanghai"></el-option>
            <el-option label="郫都区" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </div> -->
      <el-form-item size="small" label="发货时间：" prop="provice">
        <el-select class="" v-model="form.deliveryTime" placeholder="请选择">
          <el-option label="12小时内" value="shanghai"></el-option>
          <el-option label="24小时内" value="beijing"></el-option>
        </el-select>
        <p class="warn">如实设置商品的发布时，可避免发货咨询和纠纷。</p>
      </el-form-item>
      <el-form-item size="small" label="是否包邮：" prop="postage">
        <el-radio-group v-model="form.postage">
          <el-radio label="自定义运费"></el-radio>
          <el-radio label="商家承担运费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="运送方式：">
        <p class="warn two">除指定区域外，其他地区费用采用“默认运费”</p>
        <el-checkbox-group v-model="form.deliveryType">
          <el-checkbox label="快递"></el-checkbox>
          <el-checkbox label="EMS"></el-checkbox>
          <el-checkbox label="平邮"></el-checkbox>
          <el-checkbox label="家装物流"></el-checkbox>
        </el-checkbox-group>
        <div class="gray">
          <el-form class="lonely" :model="inpform" ref="inpform">
            <el-form-item size="small" label="每张订单不满">
              <el-input placeholder="" v-model="inpform.deliveryPay"></el-input>元，
            </el-form-item>
            <el-form-item size="small" label="运费">
              <el-input placeholder="" v-model="inpform.include"></el-input>元，
            </el-form-item>
            <el-form-item size="small" label="每张订单满">
              <el-input placeholder="" v-model="inpform.adds"></el-input>元，
            </el-form-item>
            <el-form-item size="small" label="运费">
              <el-input placeholder="" v-model="inpform.addpay"></el-input>元
            </el-form-item>
          </el-form>
          <div class="wrap">
            <el-radio v-model="inpform.radios" label="1">固定运费</el-radio>
            <el-form-item size="small" label="">
              <el-input placeholder="" v-model="inpform.fixpay"></el-input>元
            </el-form-item>
          </div>
        </div>
        <div class="addicon">
          <i class="el-icon-circle-plus-outline iconsize"></i>
          <p class="icondesc">为指定地区城市设置运费</p>
        </div>
        <div class="models">
          <div class="areaBgk">选择区域</div>
          <div class="checkBoxs">
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="华东"></el-checkbox>
              <el-checkbox label="上海市"></el-checkbox>
              <el-checkbox label="江苏省"></el-checkbox>
              <el-checkbox label="浙江省"></el-checkbox>
              <el-checkbox label="安徽省"></el-checkbox>
              <el-checkbox label="江西省"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="华北"></el-checkbox>
              <el-checkbox label="北京市"></el-checkbox>
              <el-checkbox label="天津市"></el-checkbox>
              <el-checkbox label="山西省"></el-checkbox>
              <el-checkbox label="山东省"></el-checkbox>
              <el-checkbox label="河北省"></el-checkbox>
              <el-checkbox label="内蒙古自治区"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="华中"></el-checkbox>
              <el-checkbox label="上海市"></el-checkbox>
              <el-checkbox label="江苏省"></el-checkbox>
              <el-checkbox label="浙江省"></el-checkbox>
              <el-checkbox label="安徽省"></el-checkbox>
              <el-checkbox label="江西省"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="华南"></el-checkbox>
              <el-checkbox label="广东省"></el-checkbox>
              <el-checkbox label="广西壮族自治区"></el-checkbox>
              <el-checkbox label="福建省"></el-checkbox>
              <el-checkbox label="海南省"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="东北"></el-checkbox>
              <el-checkbox label="辽宁省"></el-checkbox>
              <el-checkbox label="吉林省"></el-checkbox>
              <el-checkbox label="黑龙江省"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="西北"></el-checkbox>
              <el-checkbox label="陕西省"></el-checkbox>
              <el-checkbox label="新疆维吾尔自治区"></el-checkbox>
              <el-checkbox label="甘肃省"></el-checkbox>
              <el-checkbox label="宁夏回族自治区"></el-checkbox>
              <el-checkbox label="青海省"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.checks">
              <el-checkbox label="西南"></el-checkbox>
              <el-checkbox label="重庆市"></el-checkbox>
              <el-checkbox label="云南省"></el-checkbox>
              <el-checkbox label="贵州省"></el-checkbox>
              <el-checkbox label="西藏自治区"></el-checkbox>
              <el-checkbox label="四川省"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="surebtn">
            <el-button class="addBtns" type="success" size="small">确定</el-button>
            <el-button class="addBtns" type="danger" size="small">取消</el-button>
          </div>
        </div>
      </el-form-item>
      <div class="btndiv">
        <el-button type="primary" size="small">取消</el-button>
        <el-button type="primary" size="small">确认</el-button>
      </div>
    </el-form>
  </div>
</el-card>
</template>
<script>
export default {
  name: 'newly',
  data () {
    return {
      form: {
        paystyle: '按店铺计费',
        name: '',
        // provice: '',
        // city: '',
        // area: '',
        deliveryTime: '',
        postage: '',
        deliveryType: [],
        checks: []
      },
      inpform: {
        deliveryPay: '',
        include: '',
        adds: '',
        addpay: '',
        radios: '',
        fixpay: ''
      },
      rules: {
        postage: [
          { required: true, message: '请选择是否包邮', trigger: 'change' }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  .form {
    width: 60%;
    margin-left: 50px;
    .proces {
      display: flex;
    }
    .warn {
      display: inline;
      color: #f00;
      font-size: 12px;
      margin-left: 20px;
    }
    .warn.two{
      margin-left: 0;
    }
    .gray {
      background-color: #f5f5f5;
      .lonely {
        display: flex;
        padding: 0 7px;
        .el-form-item {
          display: flex;
          margin-top: 15px;
          margin-bottom: 15px;
          .el-form-item__content {
            .el-input {
              width: 100px;
            }
          }
        }
        .el-form-item{
          .el-input {
            margin-right: 7px;
          }
        }
      }
      .wrap {
        display: flex;
        align-items: center;
        padding: 7px;
        .el-form-item {
          margin-bottom: 0;
          .el-form-item__content {
            display: flex;
            .el-input {
              width: 95px;
              margin-left: 20px;
              margin-right: 7px;
            }
          }
        }
      }
    }
    .models {
      // padding-left: 130px;
      .preview {
        padding: 14px 0;
        font-size: 15px;
      }
      .surebtn {
        float: right;
        padding: 20px 0;
      }
      .checkBoxs {
        margin-top: 11px;
        .el-checkbox-group {
          border-top: 1px solid #f1f1f1;
        }
        .el-checkbox-group:last-child {
          border-bottom: 1px solid #f1f1f1;
        }
        .el-checkbox + .el-checkbox {
          margin-left: 15px;
        }
      }
      .areaBgk {
        padding: 5px 0 5px 15px;
        background-color: #f5f5f5;
      }
    }
    .addicon {
      display: flex;
      align-items: center;
      .iconsize {
        font-size: 20px;
      }
      .icondesc {
        color: #f00;
        font-size: 12px;
        padding-left: 10px;
      }
    }
    .btndiv {
      text-align: center;
      .el-button {
        border-radius: 4px;
      }
    }
  }
}
</style>
